<template>
	<view class="header">
		<!-- <u-navbar title="询比价再购" background='#FBD220'></u-navbar> -->
		<view>
			<!-- <view class="status-bar" :style="{ height: statusBarHeight + 'rpx' }"></view> -->
			<view class="navTitle">
				<view class="navLogo">
					<!-- <image src='https://files.yzsheng.com/client/order/bg.png'></image> -->
				</view>
				<view class="navRight">
					<view class="navRight-title">买车先到7迈车询比价再购</view>
					<view class="navRight-list">
						<view></text>车价平均低于传统4S店<text style="font-weight: bolder;font-size: 30rpx;">5000元</text></view>
						<view>市场低价轻松购, 不吃亏</view>
					</view>
					<view class="navRight-num">898.545人使用</view>
				</view>
			</view>
			<view class="content" v-show="list.length">
				<view>
					<view class="flex flex-jc-sb">
						<view class="look pz" @click="lookPz">查看配置</view>
						<view class="look">
							<text @click="edit">编辑</text>
							<text>|</text>
							<text @click="addConf">添加</text>
						</view>
					</view>
					<view>
						<!-- :autoplay="true" -->
						<swiper :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx" :interval="3000"
						 :duration="100" @change="swierChange" :id="id">
							<swiper-item v-for="(item,i) in list" :key="item.id" :item-id="String(item.id)" class="swiper">
								<view @click='show=true'>
									<i-icon icon="iconshanchu" class="del" v-show="isIcon"></i-icon>
								</view>
								<image :src="'https://carfiles.yzsheng.com/goodimg/cartypeimg/' + item.car_Type_Id + '.png'" class="slide-image"
								 :class="currentIndex === i?'active':''"></image>
								<view class="content-footer">
									<view class="name" style="font-size: 30rpx;font-weight: bold;">{{item.car_Type_Name}}</view>
									<view class="name">{{item.configuration_Name}}</view>
									<view class="flex flex-jc-c list flex-ai-c">
										<!-- 前 -->
										<view class="first">
											<view class="flex" v-if="JSON.parse(item.colour).inColour.length===1">
												<view class="text" :style="{background:JSON.parse(item.colour).inColour[0].colorCoding}"></view>
											</view>
											<view v-else-if="JSON.parse(item.colour).inColour.length===0">
												<view class="text" style="background: linear-gradient(0deg,rgba(255,49,49,1),rgba(255,243,52,1),rgba(37,191,255,1));"></view>
											</view>
											<view class="flex" v-else>
												<view class="text" :style="{background:JSON.parse(item.colour).inColour[0].colorCoding}"></view>
												<!-- <view class="text" :style="{background:JSON.parse(item.colour).inColour[1].colorCoding}"></view> -->
											</view>
										</view>
										<!-- 颜色名 -->
										<view style="margin-left: 5rpx;" v-if="JSON.parse(item.colour).inColour.length+JSON.parse(item.colour).outerColour.length===0">
											色全
										</view>
										<view v-else>
											{{JSON.parse(item.colour).inColour.length + JSON.parse(item.colour).outerColour.length}}种配色
										</view>
										<!-- 后 -->
										<view class="out" v-if="JSON.parse(item.colour).outerColour.length>=1">
											<view>
												<view class="text" :style="{background:JSON.parse(item.colour).outerColour[0].colorCoding}"></view>
											</view>
										</view>
										<view v-else-if="JSON.parse(item.colour).outerColour.length===0">
											<view class="text" style="background: linear-gradient(0deg,rgba(255,49,49,1),rgba(255,243,52,1),rgba(37,191,255,1));"></view>
										</view>
									</view>

									<view class="name footer">厂家指导价:
									<text v-if="item.car_Price==='0.00'">暂无</text>
									<text class="price" v-else>{{item.car_Price | million}}</text></view>
									
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			 
			<view class="content2" v-show="!list.length">
				<view style="text-align: center;">
					<image style="height: 125rpx; width: 308rpx;margin-top: 111rpx;" src="https://files.yzsheng.com/client/comparison/images/che.png"></image>
					<view class="addBtn">
						<view class="goAdd flex flex-ai-c flex-jc-c" @click="addConf">
							<i-icon icon="icontianjia" size="44rpx" color="#3D3D3D" />
							<text>去添加</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务流程 -->
		<view class="image">
			<image style="height: 260rpx; width: 100%;" src="https://files.yzsheng.com/client/comparison/images/fuwuliucheng.png"></image>
		</view>

		<!-- 服务优势 -->
		<view class="image" style="margin-top: 25rpx;">
			<image style="height: 490rpx; width: 100%;" src="https://files.yzsheng.com/client/comparison/images/fuwuyoushi.png"></image>
		</view>
		<!-- 立即询比价 -->
		<view class="button">
			<button @click="gotoInfo">立即询比价购车</button>
		</view>
		
		<!-- 删除模态框 -->
		<u-modal v-model="show" @confirm="del" :show-cancel-button='true' confirm-color='#FBD220'>
			<view class="flex flex-jc-c flex-ai-c" style="margin:50rpx 50rpx;">你确定要删除吗</view>
		</u-modal>
	</view>
</template>

<script src='./comparison_home'></script>

<style lang="scss" scoped>
	@import './comparison_home.scss';
</style>
